<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>潮人推荐</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/products.css">
</head>
<body>
    <div id="header">
        <div class="wrapper">
            <div id="main-header">
                <div id="login" class="float">
                    <a href="login.html">登录</a>
                </div>
                <h1 class="float">我的小店</h1>
                <div id="cart" class="float">
                    <a href="cart.html">购物车：$0.00(0件)</a>
                </div>
                <p>清空购物车</p>
            </div>
            <ul id="nav">
                <li><a href="index.html">首页</a></li>
                <li id="makeup">
                    <a href="">美妆商城</a>
                    <div id="submenu">

                    </div>
                </li>
                <li><a href="special-sale.html">特卖商场</a></li>
                <li><a href="single.html">新品上市</a></li>
                <li class="selected"><a href="products.html">潮人推荐</a></li>
                <li><a href="">进口免税店</a></li>
            </ul>
        </div>
    </div>
    <div id="boutique">
        <div class="wrapper">
            <h2>精品甄选</h2>
            <div id="menu" class="float">
                <div id="choose">
                    <h4>筛选</h4>
                    <ul>
                        <li class="classify">护肤
                            <img src="img/do.png" alt="">
                            <ul class="submenu">
                                <li>001</li>
                                <li>002</li>
                                <li>003</li>
                                <li>004</li>
                                <li>005</li>
                            </ul>
                        </li>
                        <li class="classify">洁面
                            <img src="img/do.png" alt="">
                        </li>
                        <li class="classify">彩妆
                            <img src="img/do.png" alt="">
                        </li>
                        <li class="classify">洗护用品
                            <img src="img/do.png" alt="">
                        </li>
                        <li class="classify">男士专用
                            <img src="img/do.png" alt="">
                        </li>
                    </ul>
                </div>
                <div id="brand">
                    <h4>BRAND</h4>
                    <label>
                        <input type="checkbox">Chicca
                    </label>
                    <label>
                        <input type="checkbox">赫莲娜
                    </label>
                    <label>
                        <input type="checkbox">海蓝之谜
                    </label>
                    <label>
                        <input type="checkbox">Pola
                    </label>
                    <label>
                        <input type="checkbox">黛珂
                    </label>


                </div>
            </div>
            <div id="product" class="float">
                <div class="product-info">
                    <img src="img/bs1.jpg" alt="">
                    <div class="product-detail">
                        <h3>美宝莲好气色轻唇膏</h3>
                        <h3>￥136.00</h3>
                        <input type="text" value="1"><br>
                        <button class="add">添加到购物车</button>
                    </div>
                </div>
                <div class="product-info">
                    <img src="img/bs1.jpg" alt="">
                    <div class="product-detail">
                        <h3>美宝莲好气色轻唇膏</h3>
                        <h3>￥136.00</h3>
                        <input type="text" value="1"><br>
                        <button class="add">添加到购物车</button>
                    </div>
                </div>
                <div class="product-info">
                    <img src="img/bs1.jpg" alt="">
                    <div class="product-detail">
                        <h3>美宝莲好气色轻唇膏</h3>
                        <h3>￥136.00</h3>
                        <input type="text" value="1"><br>
                        <button class="add">添加到购物车</button>
                    </div>
                </div>
                <div class="product-info">
                    <img src="img/bs1.jpg" alt="">
                    <div class="product-detail">
                        <h3>美宝莲好气色轻唇膏</h3>
                        <h3>￥136.00</h3>
                        <input type="text" value="1"><br>
                        <button class="add">添加到购物车</button>
                    </div>
                </div>
                <div class="product-info">
                    <img src="img/bs1.jpg" alt="">
                    <div class="product-detail">
                        <h3>美宝莲好气色轻唇膏</h3>
                        <h3>￥136.00</h3>
                        <input type="text" value="1"><br>
                        <button class="add">添加到购物车</button>
                    </div>
                </div>
                <div class="product-info">
                    <img src="img/bs1.jpg" alt="">
                    <div class="product-detail">
                        <h3>美宝莲好气色轻唇膏</h3>
                        <h3>￥136.00</h3>
                        <input type="text" value="1"><br>
                        <button class="add">添加到购物车</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="footer">
        <div class="wrapper">
            <h3>我的小店</h3>
            <h4>Copyright © 2017.我的小店</h4>
        </div>
    </div>

    <script src="javascript/wichung-1.0.js"></script>
    <script src="javascript/products.js"></script>
</body>
</html>